<template>
   <div class="wode">
       <header class="headr">
            <span class="iconfont icon-iconfontjiantouzuo"></span>
        </header>
        <figure class="img">
            <img src="https://misc.gomein.net.cn/plus/images/u/login/logo_xh.png?v=2017092001" alt="">    
        </figure>  
        <ul class="uls">
            <li @click="p1" v-bind:class="{class:isc}">账号密码登录</li>
            <li @click="p2" v-bind:class="{class:ics}">短信验证码登录</li>
        </ul>
        <div class="zuohe"  v-show="show">
            <section class="shuru">
                <div class="shuTop">
                    <span class="iconfont icon-weibiaoti1"></span>
                    <input type="text" placeholder="手机号/邮箱/用户名/门店会员卡号">
                </div>
                <div class="shuBtm">
                    <span class="iconfont icon-password"></span>
                    <input type="password" placeholder="请输入密码">
                    <span class="iconfont icon-jianpan"></span>
                </div>
                <ul class="wenzi">
                        <li>
                        <a href="https://reg.m.gome.com.cn/registered.html">
                            手机号码快速注册
                            </a>         
                        </li>
                        <li>
                            <a href="https://m.gome.com.cn/find_password.html">
                                找回密码
                            </a>  
                        </li>
                </ul>
                <button class="btn">登录</button>
            </section>
        </div>

        <div class="youhe" v-show="sow">
            <section class="shuruyou">
                <div class="shuTops">
                    <span class="iconfont icon-weibiaoti1"></span>
                    <input type="text" placeholder="手机号/邮箱/用户名/门店会员卡号">
                </div>
                <div class="shuBtms">
                    <div class="btmLeft">
                        <span class="iconfont icon-jianpan"></span>
                        <input type="password" placeholder="请输入密码">
                    </div>
                    <button class="butom">获取验证码</button>
                </div> 
                <button class="btn">登录</button>
                <figcaption class="tti">
                    <p>未注册手机登录成功将自动注册，且代表您同意以下协议</p>
                    <a href="https://m.gome.com.cn/register_boder.html">《国美平台服务协议》</a>
                    <a href="https://m.gome.com.cn/meifubao_service_agreement.html">《美付宝服务协议》</a>
                </figcaption>
            </section>
        </div>

        <section class="charu">
            <p>使用以下账户登录</p>
        </section>
        <section class="denglu">
            <dl>
                <dt>
                    <img src="https://misc.gomein.net.cn/plus/images/u/login_new/mdhy.png" alt="">
                </dt>
                <dd>门店会员</dd>    
            </dl>
            <dl>
                <dt>
                    <img src="https://misc.gomein.net.cn/plus/images/u/login_new/QQ.png" alt="">
                </dt>
                <dd>QQ</dd>    
            </dl>
            <dl>
                <dt>
                    <img src="https://misc.gomein.net.cn/plus/images/u/login_new/weibo.png" alt="">
                </dt>
                <dd>新浪微博</dd>    
            </dl>
            <dl>
                <dt>
                    <img src="https://misc.gomein.net.cn/plus/images/u/login_new/zfb.png" alt="">
                </dt>
                <dd>支付宝</dd>    
            </dl>
        </section>
 



   </div>
</template>
<script>
    export default {
        data() {
            return {
                isc: false,
                show: false,
                ics: true,
                sow: true,   
            }
        },
        methods: {
            p1: function() {
                this.show = true;
                this.isc = true;
                this.sow = false;
                this.ics = false;
            },
            p2: function() {
                this.show = false;
                this.sow = true;
                this.isc = false;
                this.ics = true;
            }
        },
    }
</script>
<style scoped lang="less">
    .px2rem(@name, @px) {
       @{name}: @px / 75 * 1rem;
    }
    .wode{
        font-family: "微软雅黑";
        .headr {
            .px2rem(height,100);
            width: 100%;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            span {
                .px2rem(width,230);
                height: 100%;
                .px2rem(font-size,46);
                text-align: center;
                line-height: 2.5;
            }
           
        }
        .img{
            .px2rem(height,132);
            text-align: center;
            .px2rem(padding-top,150);
            img{
                width: 50%;
                .px2rem(height,132);
            }
        }
        .uls{
            width: 70%;
            .px2rem(height,80);
            margin: auto;
            display: flex;
            .px2rem(padding-top,30);
            li{
                flex: 1;
                .px2rem(height,80);
                .px2rem(font-size,30);
                text-align: center;
                line-height: 2.5;
            }
        }
        .zuohe{
            .shuru{
                width: 75%;
                margin: auto;
                .shuTop{
                .px2rem(height,110);
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ccc;
                    span{
                        .px2rem(height,80);
                        .px2rem(width,60);
                        text-align: center;
                        .px2rem(font-size,40);
                        color: #ccc;
                        line-height: 2.1;
                    }
                    input{
                        .px2rem(height,90);
                        flex: 1;
                        .px2rem(font-size,28);
                        color: #ccc;
                        border: none;
                        outline: none;
                    }
                }
                .shuBtm{
                    .px2rem(height,110);
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #ccc; 
                    span{
                        .px2rem(height,80);
                        .px2rem(width,60);
                        text-align: center;
                        .px2rem(font-size,46);
                        color: #ccc;
                        line-height: 2.1;
                    } 
                    input{
                        .px2rem(height,90);
                        flex: 1;
                    .px2rem(font-size,28);
                        color: #ccc; 
                        border: none;
                        outline: none;
                    }
                }
                .wenzi{
                    .px2rem(height,100);
                    display: flex;
                    justify-content: space-between;
                    li{
                        a{
                            .px2rem(font-size,30);
                            color: skyblue;
                            line-height: 2.8;
                        }
                    }
                }
                .btn{
                    width: 100%;
                    .px2rem(height,86);
                    background: rgba(255, 0, 0, 0.3); 
                    border-radius: 45px;
                    .px2rem(font-size,34);
                    color: #eee;
                    outline: none;
                }
            }
        }
        .youhe{
            .shuruyou{
                width: 75%;
                margin: auto;
                .shuTops{
                    .px2rem(height,110);
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #ccc;
                    span{
                        .px2rem(height,80);
                        .px2rem(width,60);
                        text-align: center;
                        .px2rem(font-size,40);
                        color: #ccc;
                        line-height: 2.1;
                    }
                    input{
                        .px2rem(height,90);
                        flex: 1;
                        .px2rem(font-size,28);
                        color: #ccc;
                        border: none;
                        outline: none;
                    }
                }
                .shuBtms{
                    .px2rem(height,110);
                    display: flex;
                    align-items: center;
                    .btmLeft{
                        width: 65%;
                        .px2rem(height,110);
                        display: flex;
                        align-items: center;
                        border-bottom: 1px solid #ccc; 
                        span{
                            .px2rem(height,80);
                            .px2rem(width,60);
                            text-align: center;
                            .px2rem(font-size,46);
                            color: #ccc;
                            line-height: 2.1;
                        } 
                        input{
                            .px2rem(height,90);
                            flex: 1;
                           .px2rem(font-size,28);
                            color: #ccc; 
                            border: none;
                            outline: none;
                        } 
                    }
                    .butom{
                        .px2rem(width,190);
                        .px2rem(height,75);
                        background: rgba(255, 38, 0, 0.7);
                        .px2rem(font-size,28);
                        color: #eee;
                        border-radius: 45px;
                        outline: none;
                    }
                }
                .btn{
                    width: 100%;
                    .px2rem(height,86);
                    background: rgba(255, 0, 0, 0.3); 
                    border-radius: 45px;
                    .px2rem(font-size,34);
                    color: #eee;
                    outline: none;
                    .px2rem(margin-top,30);
                }
                .tti{
                    display: flex;
                    flex-wrap: wrap;
                    .px2rem(padding-top,35);
                    p{
                        width: 100%;
                        line-height: 1.4;
                        .px2rem(font-size,28);
                        color: #666;
                    }
                    a{
                      flex: 1;
                      line-height: 2;
                      color: skyblue;
                      .px2rem(font-size,28);
                    }
                }
            }
        }

        .charu{
            width: 75%;
            .px2rem(height,65);
            margin: auto; 
            .px2rem(padding-top,50);
            color: #ccc;
            p{   
                .px2rem(font-size,28);
                text-align: center;
                line-height: 2;
            }
        }
        .charu::after{
            content: "";
            display: block;
            border-bottom: 1px solid #999;
            width: 100%;
            margin: auto;
            .px2rem(margin-top,-30);
        }
        .denglu{
            width: 75%; 
            margin: auto; 
            display: flex;
            dl{
                flex: 1;
                text-align: center;
                dt{
                    .px2rem(height,120);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                     img{
                         .px2rem(width,80);
                         .px2rem(height,80);
                         
                     }
                }
                dd{
                    .px2rem(font-size,26);
                    .px2rem(height,60);
                    line-height: 1.5;
                }
            }
        }
        
    }
    .class{
        border-bottom: 3px solid red;
        color: red;
    }
</style>
